<template>
  <el-row>
    <el-col :span="4" />
    <el-col :span="2">
      <div>消息中心</div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        style="border: none"
        router
      >
        <el-menu-item index="replyMe">
          <span>回复我的</span>
        </el-menu-item>
        <el-menu-item index="myLikes">
          <span>收到的赞</span>
        </el-menu-item>
        <el-menu-item index="myMsg">
          <span>我的消息</span>
        </el-menu-item>
      </el-menu>

    </el-col>
    <el-col :span="14">
      <router-view v-slot="{ Component }">
        <!--          <keep-alive>-->
        <component :is="Component" />
        <!--          </keep-alive>-->
      </router-view>
    </el-col>
    <el-col :span="4" />
  </el-row>
</template>

<script lang="ts">
import {defineComponent, ref} from 'vue'
import {useRoute} from 'vue-router'

export default defineComponent({
  name: 'MessageVies',
  setup() {
    const route = useRoute()
    const activeIndex = ref(route.path)
    return {activeIndex}
  }

})

</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.demo-tabs .custom-tabs-label .el-icon {
  vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
  vertical-align: middle;
  margin-left: 4px;
}
</style>
